<template>
  <div>
    <div>
      <vue-draggable :options="dragOptions1">
        <div>
          A-B
        </div>
      </vue-draggable>
    </div>
    <div style="height: 700px; width: 800px; border: 1px solid red; position: relative;margin: 0 auto">
      <vue-draggable-resizable
        :w="200"
        :h="200"
        :parent="true"
        :debug="false"
        :min-width="200"
        :min-height="200"
        :isConflictCheck="true"
        :snap="true"
        :snapTolerance="20"
        class="test3">
      </vue-draggable-resizable>
    </div>
  </div>
</template>

<script>
import VueDraggable from 'vuedraggable'
import VueDraggableResizable from 'vue-draggable-resizable'
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'

export default{
  name: 'TestDemo',
  components: {
    VueDraggable,
    VueDraggableResizable
  },
  computed: {
    dragOptions1 () {
      return {
        group: {
          name: 'description',
          pull: 'clone',
          put: false
        },
        ghostClass: 'ghost'
      }
    }
  }

}
</script>

<style scoped lang="scss" rel="stylesheet/scss">

</style>
